<template>
  <div class="btn">
    <el-button
      @click="goBack"
    >
      返回
    </el-button>
  </div>
  <ContentWrap>
    <div class="formView" :style="`height: ${contentHeight}px`">
      <div>
        <img src="@/assets/imgs/hasColorLogo.png" alt="" class="logo" />
        <div class="title">设计完工单</div>
      </div>
      <div class="firstCard">
        <el-row>
          <el-col :span="18">
            <el-row class="colItem">
              <el-col :span="12" class="cardItem">
                <div class="formTitle">完工单号</div>
                <el-input v-model="formData.taskCode" disabled />
              </el-col>
              <el-col :span="12" class="cardItem">
                <div class="formTitle">任务单号</div>
                <el-input v-model="formData.taskCode" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="12" class="cardItem">
                <div class="formTitle">产品编号</div>
                <el-input v-model="formData.productCode" disabled />
              </el-col>
              <el-col :span="12" class="cardItem">
                <div class="formTitle">产品名称</div>
                <el-input v-model="formData.productName" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="12" class="cardItem">
                <div class="formTitle">产品规格</div>
                <el-input v-model="formData.productSpec" disabled />
              </el-col>
              <el-col :span="12" class="cardItem">
                <div class="formTitle">客户代码</div>
                <el-input v-model="formData.customerCode" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="12" class="cardItem">
                <div class="formTitle">部件名称</div>
                <el-input v-model="formData.componentName" disabled />
              </el-col>
              <el-col :span="12" class="cardItem">
                <div class="formTitle">出图类型</div>
                <el-select v-model="formData.drawingType" clearable disabled>
                  <el-option
                    v-for="dict in getIntDictOptions('drawing_type')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-col>
            </el-row>
            <div class="colItem editType">
              <div class="editTypeTitle">图纸改动类型</div>
              <div class="editTypeTitle">无改动</div>
              <div class="editTypeTitle">规格化改动</div>
              <div class="editTypeTitle">优化改动</div>
              <div class="editTypeTitle">仿制型新产品</div>
              <div class="editTypeTitle">创新型新产品</div>
              <div class="editTypeTitle">合计</div>
            </div>
            <div class="colItem editType">
              <div class="editTypeTitle">图纸改动数量</div>
              <template v-if="formData.alerts.length">
                <div class="editTypeTitle" v-for="(item, index) in formData.alerts" :key="index"><el-input v-model="item['alterNum']" type="number" disabled /></div>
              </template>
            </div>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">出图内容</div>
                <el-input
                  disabled
                  v-model="formData.drawingContent"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">改动内容</div>
                <el-input
                  disabled
                  v-model="formData.changeContent"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem borderBottom">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">备注</div>
                <el-input
                  disabled
                  v-model="formData.remarks"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <div class="drawingTitle">图号清单</div>
            <div class="drawingText">{{ getDrawingComponentName(formData.drawings) }}</div>
          </el-col>
        </el-row>
        <el-row class="colItem">
          <el-col :span="18" class="cardItem">
            <div class="formBigTitle">校对意见</div>
            <el-input
              v-model="formData.verifyOpinion"
              disabled
              maxlength="200"
              :rows="3"
              resize="none"
              show-word-limit
              type="textarea"
            />
          </el-col>
          <el-col :span="6" class="newCardItem">
            <div class="disFlex alignCenter">
              <div class="newFormTitle">校对人</div>
              <el-input v-model="formData.verifiorName" disabled />
            </div>
            <div class="disFlex alignCenter top-border">
              <div class="newFormTitle">校对时间</div>
              <el-input v-model="formData.verifiorTime" disabled  />
            </div>
          </el-col>
        </el-row>
        <el-row class="colItem">
          <el-col :span="18" class="cardItem">
            <div class="formBigTitle">审核意见</div>
            <el-input
              v-model="formData.auditOpinion"
              disabled
              maxlength="200"
              :rows="3"
              resize="none"
              show-word-limit
              type="textarea"
            />
          </el-col>
          <el-col :span="6" class="newCardItem">
            <div class="disFlex alignCenter">
              <div class="newFormTitle">审核人</div>
              <el-input v-model="formData.auditorName" disabled />
            </div>
            <div class="disFlex alignCenter top-border">
              <div class="newFormTitle">审核时间</div>
              <el-input v-model="formData.auditorTime" disabled />
            </div>
          </el-col>
        </el-row>
        <el-row class="colItem">
          <el-col :span="18" class="cardItem">
            <div class="formBigTitle">批准结果</div>
            <el-input
              v-model="formData.ratifyResult"
              disabled
              maxlength="200"
              :rows="3"
              resize="none"
              show-word-limit
              type="textarea"
            />
          </el-col>
          <el-col :span="6" class="newCardItem">
            <div class="disFlex alignCenter">
              <div class="newFormTitle">批准人</div>
              <el-input v-model="formData.ratifiorName" disabled />
            </div>
            <div class="disFlex alignCenter top-border">
              <div class="newFormTitle">批准时间</div>
              <el-input v-model="formData.ratifyTime" disabled />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </ContentWrap>
</template>
<script setup lang="ts">
import * as DesignCompleteTicketApi from '@/api/technology/designCompleteTicket'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { getIntDictOptions } from '@/utils/dict'

const formData = ref({
  id: undefined,
  event: '通过',
  taskId: undefined,   //任务单id
  taskCode: undefined,  //任务单号
  process: undefined, //任务完成进度
  productDrawingCode: undefined,  //产品图号
  productName: undefined, //产品名称
  productType: undefined,  //产品类型
  productCode: undefined, //产品编号
  componentName: undefined, //部件名称
  drawingType: undefined, //出图类型
  drawingContent: undefined,  //出图内容
  changeContent: undefined, //改动内容
  alerts: [], //图纸改动数量
  remarks: undefined, //备注
  dictTaskStatus: undefined,  //任务状态
  verifyOpinion: undefined, //校对意见
  verifior: undefined,
  verifiorName: undefined,  //校对人姓名
  verifiorTime: undefined,  //校对时间
  verifyTime: undefined,
  auditorName: undefined, //审核人
  auditOpinion: undefined,  //审核意见
  auditorTime: undefined, //审核时间
  auditor: undefined,
  auditTime: undefined,
  ratifyResult: undefined,  //批准结果
  ratifiorName: undefined,  //批准人
  ratifior: undefined,
  ratifyTime: undefined,  //批准时间
  customerCode: undefined,  //客户代码
  productSpec: undefined,  //产品规格
  drawings: undefined,    //图纸清单
  verifyParams: undefined,    //校对参数
  baseParams: undefined   //基本参数
})

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const contentHeight = ref(0)

/**返回 */
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path: '/technology/technology/drawingProduction/designComplete'
  })
}

// 处理图号清单
const getDrawingComponentName = (drawing) => {
  console.log(drawing)
  let arr = []
  if (drawing && drawing.length) {
    arr = drawing.map(item => {
      return item.componentName
    })
  }
  return arr.join('，')
}

const { query } = useRoute() // 路由的查询
const getData = async () => {
  formLoading.value = true
  formData.value = await DesignCompleteTicketApi.getDesignCompleteTicket((query as any).id)
  formLoading.value = false
}

/** 初始化 */
onMounted(async () => {
  contentHeight.value = document.body.clientHeight - 132 - 60
  getData()
})
</script>
<style lang="scss" scoped>
.formView {
  overflow-y: auto;
  padding-bottom: 10px;
}

:deep(.el-select) {
  width: 100%;
}

.btn {
  margin-bottom: 10px;
}

.title {
  font-size: 34px;
  margin: 10px auto 20px;
  text-align: center;
  width: 250px;
}

.logo {
  width: 200px;
  height: 50px;
  float: left;
}

.drawingTitle {
  line-height: 32px;
  background: #e9fbfb;
  text-align: center;
  border-left: 1px solid #000;
}

.drawingText {
  background-color: #f5f7fa;
  height: calc(100% - 32px);
  width: 100%;
  border: 1px solid #000;
  border-right: none;
  padding: 1px 11px;
  box-sizing: border-box;
  line-height: 42px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
}

.borderBottom {
  border-bottom: 1px solid #000;
}

.firstCard {
  border: 1px solid #000;

  .newCardItem {
    border-left: 1px solid #000;
  }

  .newFormTitle {
    width: 150px;
    height: 36.5px;
    line-height: 32px;
    background: #e9fbfb;
    text-align: center;
    border-right: 1px solid #000;
  }

  .disFlex {
    display: flex;
  }

  .alignCenter {
    align-items: center;
  }

  .top-border {
    border-top: 1px solid #000;
  }

  .colItem + .colItem {
    border-top: 1px solid #000;
  }

  .editType {
    display: flex;
    align-items: center;

    > div {
      width: 14.2857%;
      text-align: center;
    }

    .editTypeTitle {
      background: #e9fbfb;
    }

    > div + div {
      border-left: 1px solid #000;
    }
  }

  .cardItem {
    display: flex;
    align-items: center;
    line-height: 32px;

    .formTitle {
      flex-shrink: 0;
      width: 150px;
      height: 100%;
      line-height: 32px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }

    .formBigTitle {
      width: 150px;
      flex-shrink: 0;
      line-height: 73px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }
  }

  .cardItem + .cardItem {
    border-left: 1px solid #000;
  }
}
</style>
